<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption">
			<view class="cu-list menu-avatar comment solids-top">
				<view class="cu-item" v-for="(item,index) in list" :key="index">
					<image class="cu-avatar round sm" style="margin-left: 0;" :src="item.user.avatar" mode="aspectFill">
						<view class="content">
							<view class="text-grey">{{item.user.nickname}}</view>
							<view class="text-gray text-content text-df">
								{{item.content}}
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">{{item.created_at}}</view>
								<view class="text-xl">
									<text v-for="i in 5" :class="i <= item.star ? 'text-red':'text-gray'"
										class="cuIcon-favorfill margin-right-xs"></text>
								</view>
							</view>
							<view class="bg-grey padding-sm radius margin-top-sm  text-sm" v-if="item.reply">
								<view class="flex">
									<view>卖家回复：</view>
									<view class="flex-sub">{{item.reply.content}}</view>
								</view>
							</view>
						</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import CommentApi from "@/api/comment";
	export default {
		name: "GoodsComment",
		mixins: [MescrollMixin],
		props: ['goods_id'],
		data() {
			return {
				mescroll: null,
				upOption: {},
				downOption: {
					use: false
				},
				list: [],
			}
		},
		methods: {
			upCallback(page) {
				if (page.num == 1) {
					this.list = [];
				}
				CommentApi.list({
					goods_id: this.goods_id,
					page: page.num,
					page_size: page.size
				}).then((res) => {
					this.list = this.list.concat(res.data);
					this.mescroll.endBySize(res.data.length, res.total);
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
		}
	}
</script>

<style scoped>
</style>
